<template>
  <div class="user-info">
    <small>修改信息后请记得保存！</small>
    <el-form v-if="data" ref="form" :model="data" :rules="rules" label-position="left" label-width="85px">
      <el-divider content-position="center">基本信息</el-divider>
      <div class="user-info-base">
        <el-row v-if="envRole === 'super'" :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="账号" prop="base.username">
              <el-input v-model.trim="data.base.username" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="密码" prop="base.password">
              <el-input v-model.trim="data.base.password" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="名称" prop="base.name">
              <el-input v-model.trim="data.base.name" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="手机号" prop="base.tel">
              <el-input v-model.trim="data.base.tel" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="微信" prop="base.wxid">
              <el-input v-model.trim="data.base.wxid" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="LINE" prop="base.line">
              <el-input v-model.trim="data.base.line" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="邮箱" prop="base.email">
              <el-input v-model.trim="data.base.email" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="邮编" prop="base.postcode">
              <el-input v-model.trim="data.base.postcode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="转账银行" prop="base.bankname">
              <el-input v-model.trim="data.base.bankname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <el-form-item label="银行卡号" prop="base.bankcard">
              <el-input v-model.trim="data.base.bankcard" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-form-item label="住址" prop="base.address">
              <el-input v-model.trim="data.base.address" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <template v-if="envRole === 'sub'">
        <el-divider content-position="center">扩展信息</el-divider>
        <div class="user-info-priv">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :md="12" :lg="12">
              <el-form-item label="购买力等级" prop="buy.buy_level">
                <el-input v-model.trim="data.buy.buy_level" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12">
              <el-form-item label="信用等级" prop="buy.credit_level">
                <el-input v-model.trim="data.buy.credit_level" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :md="12" :lg="12">
              <el-form-item label="判断力等级" prop="buy.judg_level">
                <el-input v-model.trim="data.buy.judg_level" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12">
              <el-form-item label="手续费率" prop="buy.fee_rate">
                <el-input v-model.trim="data.buy.fee_rate" type="number" :min="0" :max="100">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-form-item label="备注" prop="buy.remark">
                <el-input v-model.trim="data.buy.remark" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-form-item style="text-align: center; margin-top: 20px;">
        <el-button @click="closeForm">关闭</el-button>
        <el-button :loading="btnLoading" type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'BidcoInfo',
  props: {
    mode: {
      type: String,
      default: 'add' // edit add view
    },
    data: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(this.form))
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不得低于6位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        base: {
          username: '',
          password: '',
          name: '',
          tel: '',
          email: '',
          line: '',
          wxid: '',
          address: '',
          postcode: '',
          bankname: '',
          bankcard: ''
        },
        buy: {
          buy_level: '',
          credit_level: '',
          fee_rate: 0,
          judg_level: '',
          remark: ''
        }
      },
      rules: {
        'base.username': [{ required: true, message: '账号不能为空', trigger: 'blur' }],
        'base.password': [{ required: true, trigger: 'blur', validator: validatePassword }],
        'base.name': [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
        'base.tel': [{ required: true, message: '请填写一个手机号', trigger: 'blur' }]
      },
      formData: new FormData(),
      envRole: process.env.VUE_APP_ROLE
    }
  },
  mounted () {},
  methods: {
    closeForm () {
      this.$refs['form'].clearValidate()
      this.$emit('close')
    },
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          var privData = JSON.parse(JSON.stringify(this.data.buy))
          privData.fee_rate = privData.fee_rate / 100
          this.formData.set('base', JSON.stringify(this.data.base))
          this.formData.set('buy', JSON.stringify(privData))
          this.$emit('submit', this.formData)
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$imgHeight: 120px;
$avatarWidth: 120px;
$passportWidth: 190px;
$idcardWidth: 190px;

.user-info {
  width: 100%;
  max-width: 850px;
  margin: auto;
  &-base,
  &-priv {
    padding-top: 20px;
  }
  /deep/.el-divider {
    &__text {
      color: #777;
    }
  }
}
.img-uploader {
  /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409EFF;
    }
  }
  &-icon {
    font-size: 28px;
    color: #8c939d;
    width: $avatarWidth;
    height: $imgHeight;
    line-height: $imgHeight;
    text-align: center;
  }
  img {
    height: $imgHeight;
    display: block;
  }
  .img-avatar,
  .icon-avatar {
    width: $avatarWidth;
  }
  .img-passport,
  .icon-passport {
    width: $passportWidth;
  }
  .img-idcard,
  .icon-idcard {
    width: $idcardWidth;
  }
}
.input-prepend-num {
  /deep/.el-input-group__prepend {
    padding: 0;
    width: 80px;
    border: none;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
}
/deep/.el-input.is-disabled .el-input__inner {
  color: gray;
}
</style>
